<template>
  <!--导出-->
  <el-tabs type="border-card">
    <el-tab-pane label="el-table">
      <div>
        const tableProps = {
        <div
          v-for="(item, key, index) in tableProps"
          :key="index"
        >
          &nbsp; &nbsp; <span v-if="key.includes('-')">'</span>{{key}}<span v-if="key.includes('-')">'</span>: 
          <span v-if="item === true || item * 1 == item">
            {{item}}
          </span>
          <span v-else>
            "{{item}}"
          </span>
        </div>
        }
      </div>
    </el-tab-pane>
    <el-tab-pane label="json-all">
      <el-input
        v-model="json"
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 20 }"
        placeholder=""
      ></el-input>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
  import { defineComponent, computed, reactive, watch } from 'vue'
  import { ElTabs, ElTabPane, ElInput } from 'element-plus'

  export default defineComponent({
    name: 'nf-help-grid-ouput-json',
    components: {
      ElTabs,
      ElTabPane,
      ElInput
    },
    props: {
      reMeta: Object
    },
    setup(props, context) {

      // 列表的 meta 的序列化，用于导出
      const json = computed(() => JSON.stringify(props.reMeta, null ,2))

      const tableMeta = reactive({ })

      const tableProps = computed(() => {
        const re = {}
        Object.keys(tableMeta).forEach(key => {
          switch (key) {
            case 'gridMeta':
            case 'gridTable':
            case 'itemMeta':
            case 'modCol':
            case 'colOrder':
              break;
          default:
            re[key] = tableMeta[key]
            break;
          }
        })

        return re
      })



      // 提取 el-table 自己用的 props
      watch(props.reMeta, () => {
        const arrKey = [] // 记录用的属性
        Object.keys(props.reMeta).forEach((key) => {
          const val = props.reMeta[key]
          switch(key) {
            case 'show-header':
            case 'fit':
            case 'select-on-indeterminate':
              // 如果 true，删除
              if (val) {
                // delete tableMeta[key]
              } else {
                tableMeta[key] = val
                arrKey.push(key)
              }
              break;
            default:
              tableMeta[key] = val
              arrKey.push(key)
              break;
          }
        })

        // 删除没有的属性
        Object.keys(tableMeta).forEach((key) => {
          if (!arrKey.includes(key)) {
            // 删除
            delete tableMeta[key]
          }
        })
      }, {immediate: true})

      return {
        tableProps,
        tableMeta,
        json
      }
    }
  })
</script>